<template>
  <div class="option-wrapper">
    <div class="option-main">
      <a-form
        layout="vertical"
        ref="formRef"
        :model="formState"
        :rules="rules"
        @finish="handleSubmit"
      >
        <div class="option-column">
          <div class="column-title">器材基础信息</div>
          <div class="column-content">
            <div class="content-item">
              <a-form-item label="器材名称" name="equipment.name">
                <a-input
                :disabled="true"
                  v-model:value="formState.equipment.name"
                  placeholder="请输入器材名称"
                />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="器材型号" name="equipment.model">
                <a-input
                :disabled="true"
                  v-model:value="formState.equipment.model"
                  placeholder="请输入器材型号"
                />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="资产编号" name="customer_equipment.asset_no">
                <a-input
                  v-model:value="formState.customer_equipment.asset_no"
                  placeholder="请输入资产编号"
                />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="品牌" name="brand">
                <a-input
                :disabled="true"
                  v-model:value="formState.equipment.brand"
                  placeholder="请输入品牌"
                />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item
                label="器材编号"
                name="customer_equipment.equipment_no"
              >
                <a-input
                  v-model:value="formState.customer_equipment.equipment_no"
                  placeholder="请输入器材编号"
                />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="器材分类" name="category">
                <a-input
                :disabled="true"
                  v-model:value="formState.equipment.equipment_category_name"
                  placeholder="请输入器材分类"
                />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="入库时间" name="created">
                <a-date-picker
                  style="width: 100%"
                  v-model:value="formState.customer_equipment.created"
                  format="YYYY-MM-DD HH:mm:ss"
                  placeholder="请输入入库时间"
                  :show-time="{ defaultValue: dayjs('00:00:00', 'HH:mm:ss') }"
                />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="保修状态" name="warranty_status">
                <a-input
                :disabled="true"
                  v-model:value="formState.warranty_status"
                  placeholder="请输入保修状态"
                />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="保修截止日期" name="warranty_end_date">
                <a-date-picker
                  :disabled="true"
                  style="width: 100%"
                  v-model:value="formState.warranty_end_date"
                  format="YYYY-MM-DD HH:mm:ss"
                  placeholder="请输入保修截止日期"
                  :show-time="{ defaultValue: dayjs('00:00:00', 'HH:mm:ss') }"
                />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="使用地点" name="location">
                <a-input
                  v-model:value="formState.customer_equipment.location"
                  placeholder="请输入使用地点"
                />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="设备状态" name="enabled">
                <a-select
                  v-model:value="formState.customer_equipment.enabled"
                  placeholder="请选择设备状态"
                >
                  <a-select-option
                    v-for="(item, index) in statusOptions"
                    :key="index"
                    :value="item.value"
                    >{{ item.label }}</a-select-option
                  >
                </a-select>
              </a-form-item>
            </div>
          </div>
        </div>

        <div class="option-footer">
          <a-button class="opt-btn" @click="resetForm">取消</a-button>
          <a-button class="opt-btn" type="primary" htmlType="submit"
            >保存</a-button
          >
        </div>
      </a-form>
    </div>
  </div>
</template>
<script setup>
import router from "@/routers";
import { ref, computed, onMounted } from "vue";
import api from "@/api";
import { useRoute } from "vue-router";
import { message } from "ant-design-vue";
import dayjs from "dayjs";
const route = useRoute();
//获取当前url参数
const query = computed(() => route.query);
const formState = ref({
  equipment: {},
  customer_equipment: {},
  warranty_status: "",
  warranty_end_date: null,
  enabled: true,
});
const statusOptions = ref([
  {
    label: "全部",
    value: null,
  },
  {
    label: "启用",
    value: true,
  },
  {
    label: "禁用",
    value: false,
  },
]);
onMounted(async () => {
  await getCategoryData();
  await getData();
});

const rules = ref({
  name: [
    {
      required: true,
      message: "请输入客户名称",
      trigger: "blur",
    },
  ],
  class: [
    {
      required: true,
      message: "请选择客户分类",
      trigger: "change",
    },
  ],
});
const formRef = ref(null);
const handleSubmit = (values) => {
  formRef.value.validate().then(async () => {
    console.log(formState.value);
    const res = await api.apiCustomerEquipmentUpdatePost(formState.value.customer_equipment);
    console.log(222, res);
    if (res.succeeded) {
      message.success("保存成功");
      router.go(-1);
    }
  });
};
const resetForm = () => {
  formState.value = {};
  router.go(-1);
};

const categoryOptions = ref([]);
const getCategoryData = async () => {
  const res = await api.apiRepairCategoryOptionsPost({});
  console.log(111, res);
  categoryOptions.value = res.data;
};

const getData = async () => {
  let params = {
    order_equipment_id: query.value.id,
  };
  const res = await api.apiOrderEquipmentFetchModelPost(params);
  formState.value = res.data;
  if (res.data.customer_equipment == null) {
     await api.apiCustomerEquipmentCreateDefaultCustomerEquipmentPost({order_equipment_id: query.value.id })
  }
  formState.value.customer_equipment.created =formState.value?.customer_equipment?.created? dayjs(
    formState.value.customer_equipment.created,
    "YYYY-MM-DD HH:mm:ss"
  ):"";
  formState.value.warranty_end_date =formState.value?.warranty_end_date? dayjs(
    formState.value.warranty_end_date,
    "YYYY-MM-DD HH:mm:ss"
  ):"";
};
</script>
